<template>
  <div
    class="side-toolbar pos-fixed"
    style="z-index: 205"
    :class="{ 'is-collapse': !isCollapse }"
  >
    <div class="side-toolbar-content transition" ref="sideToolbarContent">
      <ul class="text-center">
        <li>
          <router-link
            to="/"
            class="py-2 block link text-gray-500 hover:text-white transition"
          >
            <el-icon :size="21.5"><HomeFilled /></el-icon>
            <span class="block text-3">首页</span>
          </router-link>
        </li>
        <li>
          <router-link
            to="/cart"
            class="py-2 block link text-gray-500 hover:text-white transition"
          >
            <el-badge :value="3" class="item">
              <el-icon :size="21.5"><Bicycle /></el-icon>
            </el-badge>
            <span class="block text-3">购物车</span>
          </router-link>
        </li>
        <li>
          <router-link
            to="/mine"
            class="py-2 block link text-gray-500 hover:text-white transition"
          >
            <el-icon :size="21.5"><Camera /></el-icon>
            <span class="block text-3">我的</span>
          </router-link>
        </li>
        <li>
          <router-link
            to="/"
            class="py-2 block link text-gray-500 hover:text-white transition"
          >
            <el-icon :size="21.5"><Camera /></el-icon>
            <span class="block text-3">客服</span>
          </router-link>
        </li>
        <li>
          <el-tooltip
            class="box-item"
            effect="light"
            content="Left Center prompts info"
            placement="left"
            trigger="hover"
          >
            <div
              class="py-2 block link text-gray-500 hover:text-white transition hover:cursor-pointer"
            >
              <el-icon :size="21.5"><Camera /></el-icon>
              <span class="block text-3">手机<br />查看</span>
            </div>
            <template #content>
              <div class="text-center py-2 text-gray-500" style="width: 100px">
                <span class="text-3">打开手机京东扫码查看商品</span>

                <div class="mt-2">
                  <el-image
                    src="https://qrimg.jd.com/https%3A%2F%2Fitem.m.jd.com%2Fproduct%2F100224796928.html%3Fpc_source%3Dpc_productDetail_100224796928-118-1-4-2.png?ltype=0"
                    alt="图片"
                    style="width: 100px; height: 100px"
                  />
                </div>
              </div>
            </template>
          </el-tooltip>
        </li>
        <li>
          <el-tooltip
            popper-class="box-tooltip-item"
            class=""
            effect="light"
            content="Left Center prompts info"
            placement="left"
            trigger="hover"
          >
            <div
              class="py-2 block link text-gray-500 hover:text-white transition hover:cursor-pointer"
            >
              <el-icon :size="21.5"><Phone /></el-icon>
              <span class="block text-3">反馈</span>
            </div>
            <template #content>
              <div class="text-center text-gray-500" style="width: 45px">
                <ul>
                  <li class="hover:text-white hover:cursor-pointer">
                    <router-link
                      to="/mine"
                      class="py-2 block link text-gray-500 hover:text-white transition"
                    >
                      <el-icon :size="21.5"><Camera /></el-icon>
                      <span class="block text-3">提建议</span>
                    </router-link>
                  </li>
                  <li class="hover:text-white hover:cursor-pointer">
                    <router-link
                      to="/mine"
                      class="py-2 block link text-gray-500 hover:text-white transition"
                    >
                      <el-icon :size="21.5"><Camera /></el-icon>
                      <span class="block text-3">举报</span>
                    </router-link>
                  </li>
                </ul>
              </div>
            </template>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <div
      class="text-center tool-box transition"
      :class="{ 'tool-box-collapse': isCollapse }"
      ref="sideToolbarBox"
    >
      <div
        @click="scrollToTop"
        class="py-2 block link text-gray-500 hover:text-white transition hover:cursor-pointer tool-item"
      >
        <el-icon :size="21.5"><Top /></el-icon>
        <span class="block text-3">回顶部</span>
      </div>
      <div
        @click="handleToggle"
        class="py-2 block link text-gray-500 hover:text-white transition hover:cursor-pointer tool-item"
      >
        <el-icon :size="21.5" v-if="!isCollapse"><ArrowRight /></el-icon>
        <el-icon :size="21.5" v-else><ArrowLeft /></el-icon>
        <span class="block text-3">{{ !isCollapse ? "收起" : "展开" }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import {
  HomeFilled,
  Bicycle,
  Camera,
  ArrowRight,
  ArrowLeft,
  Phone,
  Top,
} from "@element-plus/icons-vue";

const sideToolbarContent = ref<HTMLElement | null>(null);
const sideToolbarBox = ref<HTMLElement | null>(null);
const isCollapse = ref(false);

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth", // 启用平滑滚动
  });
};
const handleToggle = () => {
  isCollapse.value = !isCollapse.value;
  updateSidebarPosition();
};

const updateSidebarPosition = () => {
  nextTick(() => {
    if (!sideToolbarContent.value || !sideToolbarBox.value) return;

    // 更新主要内容区域
    sideToolbarContent.value.style.transform = isCollapse.value
      ? "translateX(100%)"
      : "translateX(0%)";

    // 更新按钮区域
    if (isCollapse.value) {
      sideToolbarBox.value.style.transform = "translateX(100%)";
      // 延迟将按钮移回可见位置
      setTimeout(() => {
        if (sideToolbarBox.value) {
          sideToolbarBox.value.style.transform = "translateX(0%)";
        }
      }, 750);
    } else {
      sideToolbarBox.value.style.transform = "translateX(0%)";
    }
  });
};
</script>
<style lang="scss">
$radius: 10px;
$bg-color: rgba(255, 255, 255, 0.993);
$hover-bg: rgba(255, 0, 0, 0.87);
.side-toolbar {
  width: 42.5px;
  height: auto;
  right: 0;
  bottom: 25%;
  .side-toolbar-content {
    border-radius: $radius 0 0 $radius;
    background-color: $bg-color;
    ul {
      li {
        line-height: 1.25;
        &:hover {
          background-color: $hover-bg;
        }

        &:first-child:hover {
          border-top-left-radius: $radius;
        }
      }
    }
  }
  .tool-box {
    border-radius: $radius 0 0 $radius;
    background-color: $bg-color;
    .tool-item {
      line-height: 1.25;
      border-radius: 0 0 0 $radius;
      &:hover {
        background-color: $hover-bg;
      }
      &:first-child {
        border-radius: $radius 0 0 0;
      }
      &:last-child {
        border-radius: 0 0 0 $radius;
      }
      &:first-child:hover {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0;
      }
      &:last-child:hover {
        border-top-left-radius: 0px;
        border-bottom-left-radius: $radius;
      }
    }
    &.tool-box-collapse {
      .tool-item {
        &:first-child:hover {
          border-top-left-radius: $radius;
          border-bottom-left-radius: 0;
        }
        &:last-child:hover {
          border-top-left-radius: 0;
          border-top-left-radius: 0;
        }
      }
    }
  }
}

.is-collapse {
  .side-toolbar-content {
    border-bottom-left-radius: 0;
  }
  .tool-box {
    border-top-left-radius: 0;
  }
}
// 添加过渡动画优化
.side-toolbar-content,
.tool-box {
  transition: transform 0.3s ease-in-out;

  // 确保圆角在变换时保持
  backface-visibility: hidden;
  transform: translateZ(0);
}

// 响应式优化（可选）
@media (max-width: 768px) {
  .side-toolbar {
    width: 40px;
    bottom: 20%;

    .side-toolbar-content,
    .tool-box {
      border-radius: 8px 0 0 8px;
    }
  }
}

// 样式重置
.box-tooltip-item {
  padding: 0px !important;
  border-radius: $radius;
  ul {
    li {
      &:hover {
        background-color: $hover-bg;
      }
      &:first-child {
        border-radius: $radius $radius 0 0;
      }

      &:last-child {
        border-radius: 0 0 $radius $radius;
      }
    }
  }
}
</style>
